
import { Matrix4, Clock, PerspectiveCamera, 
    CylinderGeometry,SphereGeometry, 
    Sprite, Texture, LoadingManager,
    SpriteMaterial, 
    MeshNormalMaterial, 
    ShaderMaterial,
    RawShaderMaterial,
    MeshBasicNodeMaterial,
    DoubleSide, Euler, 
    Vector2, Scene, 
    ACESFilmicToneMapping, 
    Box2, MathUtils, 
    BufferGeometry, 
    LineBasicMaterial,
    LineSegments,
    EdgesGeometry,
    PlaneGeometry, Group,
    Mesh, Vector3, Color, 
    MeshLambertMaterial,
    SpriteNodeMaterial,
    EquirectangularReflectionMapping, 
    BufferAttribute, 
    BatchedMesh, Object3D, Plane, 
    BoxGeometry, MeshBasicMaterial,
    MeshStandardMaterial, 
    MeshPhysicalMaterial,
    MeshPhongMaterial,
    pass, PostProcessing, 
    fxaa, dof, ao, uniform, 
    output, mrt, transformedNormalView, 
    Raycaster, viewportUV, clamp, FloatType, 
    MeshStandardNodeMaterial, MeshPhysicalNodeMaterial } from "three/webgpu";
import { OrbitControls, UltraHDRLoader } from "three/examples/jsm/Addons.js";
import WebGPU from "three/examples/jsm/capabilities/WebGPU.js";

import FastSimplexNoise from "@webvoxel/fast-simplex-noise";

import { WebGPURenderer } from "three/webgpu";
import { GLTFLoader } from "three/examples/jsm/Addons.js";
import { createMultiMaterialObject } from 'three/examples/jsm/utils/SceneUtils.js';
import { Pointer } from "./Pointer";
import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";

export class Demo {
    static instance;
    static firstRenderDone = false;
    canvas; //画布
    renderer; // 渲染器
    fov = 45; // 视野范围
    aspect = window.innerWidth / window.innerHeight; // 相机默认值 画布的宽高比
    near = 1; // 近平面
    far = 20000; // 远平面
    // 透视投影相机
    camera = new PerspectiveCamera(this.fov, this.aspect, this.near, this.far);
    controls; //相机控制器
    post;
    scene = new Scene(); // 场景
    pointerHandler;
    clock = new Clock(false);
    
    properties = {
        radiusTop: {
          name: 'radiusTop',
          value: 10,
          min: -40,
          max: 40,
          step: 1
        },
        radiusBottom: {
          name: 'radiusBottom',
          value: 20,
          min: -40,
          max: 40,
          step: 1
        },
        height: {
          name: 'height',
          value: 1500,
          min: 0,
          max: 1000,
          step: 1
        },
        segmentsX: {
          name: 'segmentsX',
          value: 8,
          min: 0,
          max: 40,
          step: 1
        },
        segmentsY: {
          name: 'segmentsY',
          value: 8,
          min: 0,
          max: 40,
          step: 1
        },
        openEnded: false
    };

    composer = null;
    outlinePass = null;
    renderPass = null;

    colorList = [
        //卡其色
        '0xb69860',
        //浅黄
        '0xedd3a1',
        //枯色
        '0xe0c38c',
        //榛色
        '0xbfa46f',
        //樺茶色
        '0x726250',
        //朽葉色
        '0x917347',
        //路考茶
        '0x8c7042',
        //国防色
        '0x7b6c3e',
        //利休茶
        '0xa59564',
        //空五倍子色
        '0x9d896c',
        //生壁色
        '0x94846a',
        //肥後煤竹
        '0x897858',
        //媚茶
        '0x716246',
        //黄唐色
        '0xb98c46',
        //桑染
        '0xb79b5b',
        //黄橡
        '0xb68d4c',
        //芝翫茶
        '0xad7e4e',
        //狐色
        '0xc38743',
        //黄土色
        '0xc39143',
        //香染
        '0xad7d4c',
        //枇杷茶
        '0xae7c4f'
    ]

    colorsPalette = [
        {color:'0xff0f00', name:'1100'},
        {color:'0xff7d00', name:'1000'},
        {color:'0xffec00', name:'900'},
        {color:'0xa3ff00', name:'800'},
        {color:'0x00ff39', name:'700'},
        {color:'0x00ffa8', name:'600'},
        {color:'0x00e7ff', name:'500'},
        {color:'0x0078ff', name:'300'},
        {color:'0x000aff', name:'100'},
    ]

    matParams = {
        //3. 设置材质，使用顶点颜色渲染
        vertexColors:true,//使用顶点颜色渲染
        //color: color,
        //color: new Color(parseInt(this.colorList[0])),
        // 渲染两面
        side: DoubleSide,
        //wireframe: true, //材质的网格wireframe属性
        clearcoat: 1.0,//物体表面清漆层或者说透明涂层的厚度
        clearcoatRoughness: 0.1,//透明涂层表面的粗糙度
        transmission: 0.5,//物理材质透光率,模拟玻璃、半透明塑料一类的视觉效果,代替普通透明属性.opacity 设置Mesh透明度,即便完全透射的情况下仍可保持高反射率。
        ior: 1.5,//折射率.ior非金属材料的折射率从1.0到2.333。默认值为1.5。
        metalness: 0.9,//金属度
        roughness: 0.5,//粗糙度
        bumpScale: 0.5, // 凹凸贴图的高度
        envMapIntensity: 2.5, //环境贴图对Mesh表面影响程度
        opacity: 0.9,
        // 我们同样需要把tansparent属性打开
        transparent: true,
    }
    glassMaterial = new MeshPhysicalNodeMaterial(this.matParams);

    downProgress = 0

    model = null
    models = new Group();
    x = 0
    y = 0
    z= 0
    sx = 1.0
    sy = 1.0
    sz = 1.0
    wellItems = new Object3D();
    wellSprites = new Object3D();

    // 井筒 WELL 数据 使用大地坐标时，XCOORD、YCOORD的值非常大
    // 基准点坐标, 分别为XCOORD0和YCOORD0，XCOORD和YCOORD数组只记录偏移量。
    // 基准XCOORD0 + 偏移XCOORD
    // 基准YCOORD0 + 偏移YCOORD
    XCOORD0 = 630752.507
    YCOORD0 = 4338916.207 
    infoTIME = 0
    /*
    WELL 1 'GR1-1' 305 'SHUT'
    WELL 2 'GR1-2' 370 'LRAT:999.9999 SM3/DAY'
    WELL 3 'GR1-3' 370 'LRAT:999.9999 SM3/DAY'
    WELL 4 'GR1-4' 371 'LRAT:999.9928 SM3/DAY'
    WELL 5 'GR2-2' 355 'SHUT'
    WELL 6 'GR2-3' 356 'LRAT:1000 SM3/DAY'
    WELL 7 'GR2-4' 331 'LRAT:1000 SM3/DAY'
    WELL 8 'GR2-5' 343 'LRAT:1000 SM3/DAY'
    WELL 9 'GR3-2' 389 'LRAT:999.9997 SM3/DAY'
    WELL 10 'GR3-3' 363 'SHUT'
    WELL 11 'GR3-4' 365 'LRAT:1000 SM3/DAY'
    WELL 12 'GR3-6' 363 'LRAT:1000 SM3/DAY'
    WELL 13 'GR4-1' 370 'LRAT:999.9999 SM3/DAY'
    WELL 14 'GR4-2' 347 'SHUT'
    WELL 15 'GR4-3' 319 'LRAT:1000 SM3/DAY'
    WELL 16 'GR4-4' 355 'LRAT:1000 SM3/DAY'
    WELL 17 'GR4-5' 351 'LRAT:1000 SM3/DAY'
    WELL 18 'GR4-6' 332 'LRAT:1000 SM3/DAY'
    WELL 19 'GR5-1' 382 'LRAT:1000 SM3/DAY'
    WELL 20 'GR5-2' 386 'LRAT:1000 SM3/DAY'
    WELL 21 'GR5-5' 318 'SHUT'
    WELL 22 'GR5-6' 392 'LRAT:1000 SM3/DAY'
    WELL 23 'GR6-2' 357 'LRAT:1000 SM3/DAY'
    WELL 24 'GR6-3' 312 'SHUT'
    WELL 25 'GR6-4' 316 'LRAT:1000 SM3/DAY'
    WELL 26 'GR6-5' 351 'LRAT:1000 SM3/DAY'
    WELL 27 'GR7-2' 273 'SHUT'
    WELL 28 'GR7-3' 195 'LRAT:999.9997 SM3/DAY'
    */

    wellInfo = [
        {
            id: '1',//井号
            name: 'GR1-1',//井名
            num: '305',//井节点数目
            cpr:'SHUT',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                  // 静态数据 rest 
                    rest: [
                        {key:'XCOORD',unit:'m',value: '1634.44'},
                        {key:'YCOORD',unit:'m',value: '-513.6248'},
                        {key:'DEPTH',unit:'m',value: '1852.081'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//井筒压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速 
                        {key:'QO',unit:'m3/day',value: '0'},//油流速oil 正号为流入、负号为注入，均转化到地面状态的体积流速。
                        {key:'QG',unit:'m3/day',value: '0'},//气流速gas 正号为流入、负号为注入，均转化到地面状态的体积流速。
                        {key:'QW',unit:'m3/day',value: '0'},//水流速water 正号为流入、负号为注入，均转化到地面状态的体积流速。
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ]  
                }
            ]
            
        },
        {
            id: '2',//井号
            name: 'GR1-2',//井名
            num: '370',//井节点数目
            cpr:'LRAT:999.9999 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                   // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '1578.101'},
                        {key:'YCOORD',unit:'m',value: '-904.3235'},
                        {key:'DEPTH',unit:'m',value: '1857.264'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ] 
                }
            ]
            
        },
        {
            id: '3',//井号
            name: 'GR1-3',//井名
            num: '370',//井节点数目
            cpr:'LRAT:999.9999 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                   // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '2040.376'},
                        {key:'YCOORD',unit:'m',value: '-613.6444'},
                        {key:'DEPTH',unit:'m',value: '1884.242'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ] 
                }
            ]
            
        },
        {
            id: '4',//井号
            name: 'GR1-4',//井名
            num: '371',//井节点数目
            cpr:'LRAT:999.9928 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                   // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '1266.302'},
                        {key:'YCOORD',unit:'m',value: '-702.4572'},
                        {key:'DEPTH',unit:'m',value: '1832.496'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ] 
                }
            ]
            
        },
        {
            id: '5',//井号
            name: 'GR2-2',//井名
            num: '355',//井节点数目
            cpr:'SHUT',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                  // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '2321.342'},
                        {key:'YCOORD',unit:'m',value: '-1500.041'},
                        {key:'DEPTH',unit:'m',value: '1884.405'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ]  
                }
            ]
            
        },
        {
            id: '6',//井号
            name: 'GR2-3',//井名
            num: '356',//井节点数目
            cpr:'LRAT:1000 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                  // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '2435.878'},
                        {key:'YCOORD',unit:'m',value: '-1829.453'},
                        {key:'DEPTH',unit:'m',value: '1880.274'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ]  
                }
            ]
            
        },
        {
            id: '7',//井号
            name: 'GR2-4',//井名
            num: '331',//井节点数目
            cpr:'LRAT:1000 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                   // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '2541.56'},
                        {key:'YCOORD',unit:'m',value: '-941.6433'},
                        {key:'DEPTH',unit:'m',value: '1887.254'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ] 
                }
            ]
            
        },
        {
            id: '8',//井号
            name: 'GR2-5',//井名
            num: '356',//井节点数目
            cpr:'LRAT:1000 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                    // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '2726.393'},
                        {key:'YCOORD',unit:'m',value: '-1284.873'},
                        {key:'DEPTH',unit:'m',value: '1900.401'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ]
                }
            ]
            
        },
        {
            id: '9',//井号
            name: 'GR3-2',//井名
            num: '389',//井节点数目
            cpr:'LRAT:999.9997 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                   // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '2769.661'},
                        {key:'YCOORD',unit:'m',value: '-1242.292'},
                        {key:'DEPTH',unit:'m',value: '1901.514'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ] 
                }
            ]
            
        },
        {
            id: '10',//井号
            name: 'GR3-3',//井名
            num: '363',//井节点数目
            cpr:'SHUT',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                   // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '3255.522'},
                        {key:'YCOORD',unit:'m',value: '-1449.746'},
                        {key:'DEPTH',unit:'m',value: '1889.97'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ] 
                }
            ]
            
        },
        {
            id: '11',//井号
            name: 'GR3-4',//井名
            num: '365',//井节点数目
            cpr:'LRAT:1000 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                   // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '3354.514'},
                        {key:'YCOORD',unit:'m',value: '-551.0424'},
                        {key:'DEPTH',unit:'m',value: '1929.548'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ] 
                }
            ]
            
        },
        {
            id: '12',//井号
            name: 'GR3-6',//井名
            num: '363',//井节点数目
            cpr:'LRAT:1000 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                    // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '3671.499'},
                        {key:'YCOORD',unit:'m',value: '-1282.311'},
                        {key:'DEPTH',unit:'m',value: '1925.202'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ]
                }
            ]
            
        },
        {
            id: '13',//井号
            name: 'GR4-1',//井名
            num: '370',//井节点数目
            cpr:'LRAT:999.9999 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                  // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '3755.437'},
                        {key:'YCOORD',unit:'m',value: '-344.6722'},
                        {key:'DEPTH',unit:'m',value: '1960.381'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ]  
                }
            ]
            
        },
        {
            id: '14',//井号
            name: 'GR4-2',//井名
            num: '347',//井节点数目
            cpr:'SHUT',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                  // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '3925.16'},
                        {key:'YCOORD',unit:'m',value: '-686.4225'},
                        {key:'DEPTH',unit:'m',value: '1963.771'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ]  
                }
            ]
            
        },
        {
            id: '15',//井号
            name: 'GR4-3',//井名
            num: '319',//井节点数目
            cpr:'LRAT:1000 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                   // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '4098.873'},
                        {key:'YCOORD',unit:'m',value: '-1049.915'},
                        {key:'DEPTH',unit:'m',value: '1950.633'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ] 
                }
            ]
            
        },
        {
            id: '16',//井号
            name: 'GR4-4',//井名
            num: '355',//井节点数目
            cpr:'LRAT:1000 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                    // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '4092.854'},
                        {key:'YCOORD',unit:'m',value: '-166.9816'},
                        {key:'DEPTH',unit:'m',value: '1984.752'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ]
                }
            ]
            
        },
        {
            id: '17',//井号
            name: 'GR4-5',//井名
            num: '351',//井节点数目
            cpr:'LRAT:1000 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                  // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '4245.787'},
                        {key:'YCOORD',unit:'m',value: '-516.7445'},
                        {key:'DEPTH',unit:'m',value: '1989.236'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ]  
                }
            ]
            
        },
        {
            id: '18',//井号
            name: 'GR4-6',//井名
            num: '332',//井节点数目
            cpr:'LRAT:1000 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                   // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '4504.464'},
                        {key:'YCOORD',unit:'m',value: '-870.1137'},
                        {key:'DEPTH',unit:'m',value: '1981.408'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ] 
                }
            ]
            
        },
        {
            id: '19',//井号
            name: 'GR5-1',//井名
            num: '382',//井节点数目
            cpr:'LRAT:1000 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                    // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '3889.889'},
                        {key:'YCOORD',unit:'m',value: '-1840.704'},
                        {key:'DEPTH',unit:'m',value: '1912.83'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ]
                }
            ]
            
        },
        {
            id: '20',//井号
            name: 'GR5-2',//井名
            num: '386',//井节点数目
            cpr:'LRAT:1000 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                  // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '3932.508'},
                        {key:'YCOORD',unit:'m',value: '-2208.018'},
                        {key:'DEPTH',unit:'m',value: '1909.972'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ]  
                }
            ]
            
        },
        {
            id: '21',//井号
            name: 'GR5-5',//井名
            num: '318',//井节点数目
            cpr:'SHUT',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                   // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '4372.747'},
                        {key:'YCOORD',unit:'m',value: '-1994.812'},
                        {key:'DEPTH',unit:'m',value: '1920.678'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ] 
                }
            ]
            
        },
        {
            id: '22',//井号
            name: 'GR5-6',//井名
            num: '392',//井节点数目
            cpr:'LRAT:1000 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                  // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '4591.463'},
                        {key:'YCOORD',unit:'m',value: '-2394.178'},
                        {key:'DEPTH',unit:'m',value: '1920.089'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ]  
                }
            ]
            
        },
        {
            id: '23',//井号
            name: 'GR6-2',//井名
            num: '357',//井节点数目
            cpr:'LRAT:1000 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                  // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '4804.098'},
                        {key:'YCOORD',unit:'m',value: '-267.5754'},
                        {key:'DEPTH',unit:'m',value: '2016.597'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ]  
                }
            ]
            
        },
        {
            id: '24',//井号
            name: 'GR6-3',//井名
            num: '312',//井节点数目
            cpr:'SHUT',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                  // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '4987.155'},
                        {key:'YCOORD',unit:'m',value: '-626.5946'},
                        {key:'DEPTH',unit:'m',value: '2020.773'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ]  
                }
            ]
            
        },
        {
            id: '25',//井号
            name: 'GR6-4',//井名
            num: '316',//井节点数目
            cpr:'LRAT:1000 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                   // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '5130.427'},
                        {key:'YCOORD',unit:'m',value: '-123.4141'},
                        {key:'DEPTH',unit:'m',value: '2015.812'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ] 
                }
            ]
            
        },
        {
            id: '26',//井号
            name: 'GR6-5',//井名
            num: '351',//井节点数目
            cpr:'LRAT:1000 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                  // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '5601.456'},
                        {key:'YCOORD',unit:'m',value: '-789.9283'},
                        {key:'DEPTH',unit:'m',value: '2018.281'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ]  
                }
            ]
            
        },
        {
            id: '27',//井号
            name: 'GR7-2',//井名
            num: '273',//井节点数目
            cpr:'SHUT',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                   // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '5770.853'},
                        {key:'YCOORD',unit:'m',value: '-271.2598'},
                        {key:'DEPTH',unit:'m',value: '2032.128'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ] 
                }
            ]
            
        },
        {
            id: '28',//井号
            name: 'GR7-3',//井名
            num: '195',//井节点数目
            cpr:'LRAT:999.9997 SM3/DAY',//当前生产制度
            time: '0',//数据时间
            data:[
                {
                    // 静态数据 rest
                    rest: [
                        {key:'XCOORD',unit:'m',value: '5941.789'},
                        {key:'YCOORD',unit:'m',value: '285.394'},
                        {key:'DEPTH',unit:'m',value: '1992.729'},
                        {key:'STAGE',unit:'integer',value: '0'},
                        {key:'OUTLET',unit:'integer',value: '-1'},
                    ],
                    //动态数据 motion
                    motion: [
                        {key:'WI',unit:'mD*m',value: '0'},//井筒内径
                        {key:'PRES',unit:'bar',value: '186.7146'},//压力
                        {key:'PCON',unit:'',value: '0'},//油
                        {key:'VM',unit:'m/day',value: '61038.07'},//井筒流速
                        {key:'QO',unit:'m3/day',value: '0'},//油oil
                        {key:'QG',unit:'m3/day',value: '0'},//气gas
                        {key:'QW',unit:'m3/day',value: '0'},//水water
                        {key:'WH',unit:'Frac',value: '0.5771189'},//持水率water
                        {key:'GH',unit:'Frac',value: '0.0064207'},//持气率gas
                        {key:'RS',unit:'Mscf/ST3',value: '1.36927'},//溶解气油比率
                    ]
                }
            ]
        }
    ]

    originalMaterial = null;

    selectedObjects = null;


    /**
     * Accessor from react to set the theme
     * @param theme "light" or "dark"
     */
    static setTheme(theme) {
        if (this.instance) {
            this.instance.setColorMode(theme);
        }
    }

    //使用JavaScript判断设备是手机还是模拟器的方法有：检测用户代理字符串、屏幕尺寸、设备特性、传感器数据。
    //分析浏览器的 user agent 字符串，它包含了设备信息。 JS 通过navigator.userAgent属性拿到这个字符串，
    //只要里面包含mobi、android、iphone等关键字，就可以认定是移动设备。
    isMobileDevice() {
        if (/Mobi|Android|iPhone/i.test(navigator.userAgent) ||
            'ontouchstart' in document.documentElement) {
            return true;
        }
        else {
            return false; //非移动设备
        }
    }

    constructor(canvas) {

        this.canvas = canvas;

        if (Demo.instance != null) {
            console.warn("Demo instance already exists");
            return null;
        }
        Demo.instance = this;
    }

    // start here
    async init() {
        this.isAllowComposer = true
        if (WebGPU.isAvailable() === false || this.isMobileDevice()) {
            this.isAllowComposer = false
            if (confirm("您的设备暂不完全支持GPU渲染，是否继续？")){
                this.isAllowComposer = true
            }else{
                this.isAllowComposer = false
            }
            throw new Error('No WebGPU support');
            return;
        }


        this.renderer = new WebGPURenderer({ canvas: this.canvas, antialias: true });
        // 不同硬件设备的屏幕的设备像素比window.devicePixelRatio值可能不同
        //console.log('查看当前屏幕设备像素比',window.devicePixelRatio);
        //this.renderer.setPixelRatio(1);//可能就是1、1.5、2.0等其它值。
        // 获取你屏幕对应的设备像素比.devicePixelRatio告诉threejs,以免渲染模糊问题
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        //this.renderer.setClearColor(0x1c1c1c, 1); //设置背景颜色
        this.renderer.toneMapping = ACESFilmicToneMapping;
        this.renderer.toneMappingExposure = 0.9;
        
        window.addEventListener('resize', this.onResize.bind(this));

        this.initCamera();
        this.initPostProcessing();

        this.onResize(undefined);

        this.pointerHandler = new Pointer(this.renderer, this.camera, new Plane(new Vector3(0, 1, 0), 0));

        await this.initEnvironment(); // skybox and ground

        await this.initGrid(); // setup the random grid

        await this.initOilMesh(import.meta.env.BASE_URL + "public/models/draco/gltf/"+"1b-s-data3-1-0Draco.glb");
        //for(let i = 1; i< 558;i++){
            //if(!(i%30)){
            //    setTimeout(async ()=>{
            //        this.initOilMesh(import.meta.env.BASE_URL + "public/models/draco/glb/origi/"+"data3-1-"+i+".glb");
                    //await this.initOilMesh(import.meta.env.BASE_URL + "public/models/draco/glb/draco/"+"data3-1-"+i+"Draco.glb");
            //    }, 1);
                
            //}

            
        //}

        this.scene.add(this.models)
        
        //await this.initOilMesh1();

        this.createBatchMesh();
        let wellCyl = this.createMesh(0,550,0);
        wellCyl.name = "wellTemp";
        this.scene.add(wellCyl);

        this.addBox(0,1250,0);
        this.addSphere(0,1250,0);

        this.clock.start();
        
        this.renderer.setAnimationLoop(this.animate.bind(this));
        //this.runTask(this.animate());
    }
    _runTask(task, callback){
        let start = new Date()
        let that = this
        requestAnimationFrame(()=>{
        if(Date.now() - start < 16.6){
          that.task()
          callback()
        }else{
          that._runTask(task, callback)
        }
      })
      //requestIdleCallback((idle)=>{
      //   if(idle.timeRemaining()>0){
      //       task()
      //	   callback()
      //   }else{
      //       _runTask(task,callback)
      //   }
      //})
    }
    runTask(task){
      let that = this
      return new Promise((resolve)=>{
        that._runTask(task,resolve)
      })
    }

    addSphere(x=0,y=0,z=0){
       // 创建球体几何体
        //radius（必需）：球体的半径。
        //widthSegments（可选）：水平方向的分段数，决定了球体的水平切片数。
        //heightSegments（可选）：垂直方向的分段数，决定了球体的纵向切片数。
        //phiStart（可选）：纵向起始角度，以弧度表示。
        //phiLength（可选）：纵向角度范围，以弧度表示。
        //thetaStart（可选）：水平起始角度，以弧度表示。
        //thetaLength（可选）：水平角度范围，以弧度表示。
        const radius = 50;
        const widthSegments = 32;
        const heightSegments = 16;
        const geometry = new SphereGeometry(radius, widthSegments, heightSegments);

        // 创建材质
        //const material = new MeshBasicMaterial({ color: 0xff0000 });
        const material = new MeshPhysicalNodeMaterial({ color: 0xff0000 });

        // 创建球体网格
        const sphere = new Mesh(geometry, material);
        sphere.position.set(x,y,z)
        this.scene.add(sphere); 
    }

    addsprite (color, text, postion) {
        let sprite = null
        let spriteMaterial = this.addspriteMaterial(color, text)
        sprite = new Sprite(spriteMaterial)
        sprite.scale.set(450, 150, 50) // 大小缩放比例
        // 在使用透视投影相机对象的时候，精灵模型对象显示的大小和网格模型一样受距离相机的距离影响，也就是距离越远，显示效果越小
        // 创建精灵模型对象，不需要几何体geometry参数
        // 更新材质
        sprite.material = spriteMaterial
        // 控制精灵大小，比如可视化中精灵大小表征数据大小 位置 只需要设置x、y两个分量就可以
        // 更新车辆标签位置
        sprite.position.set(postion.x, postion.y, postion.z)
        // 将geometry的groupsNeedUpdate属性设置为true来告知渲染器该对象需要更新
        sprite.geometry.groupsNeedUpdate = true
        return sprite
    }

    addspriteMaterial (color, text) { 
        let texture = new Texture(this.createCanvas(color, text))
        texture.needsUpdate = true
        // 创建精灵材质对象SpriteMaterial
        //let spriteMaterial = new SpriteMaterial({
        let spriteMaterial = new SpriteNodeMaterial({
          transparent: true,
          map: texture // 设置精灵纹理贴图
        })
        return spriteMaterial
    }

    createCanvas (color, text) {
        // 精灵平面（Sprite）是一个在3D场景中总是面对着相机的平面
        // 利用canvas绘制文字，作为sprite的材质 canvas 画布
        let canvas = document.createElement('canvas')
        // canvas 绘图上下文环境
        let context = canvas.getContext('2d')
        canvas.width = 120
        canvas.height = 40
        context.scale(2, 2)
        this.drawRect(context, color) // 绘制圆角矩形
        /* 字体颜色 */
        context.fillStyle = '#fff'
        // 减少阴影效果
        context.shadowColor = '#fff'
        context.shadowBlur = 1
        context.font = 'lighter 14px serif'
        /* 文字 */
        context.fillText(text, 1.9, 14.5)
        return canvas
    }

    drawRect (ctx, color) {
        let width = 60
        let height = 20
        // 绘制一个圆角矩形
        this.strokeRoundRect(ctx, 1, 1, width - 2, height - 2, [2, 2, 2, 2], 1, color)
    }

    strokeRoundRect (cxt, x, y, width, height, radius, lineWidth, strokeColor) {
        // 圆的直径必然要小于矩形的宽高
        if (2 * radius > width || 2 * radius > height) { return false }
        cxt.save()
        cxt.translate(x, y)
        // 绘制圆角矩形的各个边
        this.drawRoundRectPath(cxt, width, height, radius)
        cxt.lineWidth = lineWidth || 2 // 若是给定了值就用给定的值否则给予默认值2
        cxt.strokeStyle = strokeColor
        cxt.fillStyle = strokeColor + '88'
        cxt.fillRect(0, 0, width, height)
        cxt.stroke()
        cxt.restore()
    }

    drawRoundRectPath (cxt, width, height, radius) {
        let r0 = radius[0]
        let r1 = radius[1]
        let r2 = radius[2]
        let r3 = radius[3]
        cxt.beginPath(0)
        // 从右下角顺时针绘制，弧度从0到1/2PI
        cxt.arc(width - r0, height - r0, r0, 0, Math.PI / 2)
        // 矩形下边线
        cxt.lineTo(r1, height)
        // 左下角圆弧，弧度从1/2PI到PI
        cxt.arc(r1, height - r1, r1, Math.PI / 2, Math.PI)
        // 矩形左边线
        cxt.lineTo(0, r2)
        // 左上角圆弧，弧度从PI到3/2PI
        cxt.arc(r2, r2, r2, Math.PI, Math.PI * 3 / 2)
        // 上边线
        cxt.lineTo(width - r3, 0)
        // 右上角圆弧
        cxt.arc(width - r3, r3, r3, Math.PI * 3 / 2, Math.PI * 2)
        // 右边线
        cxt.lineTo(width, height - r3)
        cxt.closePath()
    }

    createBatchMesh(){
        this.wellInfo.map((item)=>{
            let { id, name, num, data, cpr } = item;
            let XCOORD = '0', YCOORD = '0', DEPTH = '0', STAGE = '0';
            data[0].rest.map((it)=>{
                if(it.key==='XCOORD'){
                    XCOORD = it.value
                }
                if(it.key==='YCOORD'){
                    YCOORD = it.value
                }
                if(it.key==='DEPTH'){
                    DEPTH = it.value
                }
                if(it.key==='STAGE'){
                    STAGE = it.value
                }
            });
            
            // XCOORD, YCOORD, DEPTH
            let x = ((this.XCOORD0/2000 + parseFloat(XCOORD))/1).toFixed(3);
            let y = 500; // = (parseInt(parseFloat)/50).toFixed(0);
            let z = ((this.YCOORD0/3000 + parseFloat(YCOORD))/1).toFixed(3);
            //console.log(x,y,z);
            x = x-4000;
            z = z+3000;

            let wellCyl = this.createMesh(x, y, z);
            wellCyl.name = "well_" + name;
            this.wellItems.add(wellCyl);

            let sprite = this.addsprite(cpr==='SHUT'?'#333333':'#00ff00', 
                name + '-' + cpr.substr(0, 2),
                {x: x, y: 1300, z: z});
            sprite.name = "sprite_" + name;
            this.wellSprites.add(sprite);

        })

        // 油井 标牌 网格对象 批量添加到场景中
        this.scene.add(this.wellItems)
        this.scene.add(this.wellSprites);

    }

    // 创建网格模型
    createMesh(x=0,y=0,z=0) {
        //创建圆柱
        //属性	必须	描述
        //radiusTop	否	该属性定义圆柱顶部圆的半径，默认值是20
        //radiusBottom	否	该属性定义圆柱底部圆的半径，默认值是20
        //height	否	该属性定义圆柱的高度，默认是100
        //segmentsX	否	该属性指定沿X轴分成多少段，段数越多，圆柱越光滑，默认值是8
        //segmentsY	否	该属性指定沿Y轴分成多少段，段数越多，圆柱竖直方向分的面越多，默认值是1
        //openEnded	否	该属性用来指定圆柱顶部和底部是否封闭，默认false

        const geom = new CylinderGeometry(
          this.properties.radiusTop.value,
          this.properties.radiusBottom.value,
          this.properties.height.value,
          this.properties.segmentsX.value,
          this.properties.segmentsY.value,
          this.properties.openEnded
        )
        // 创建材质
        //const meshMaterial = new MeshNormalMaterial({
        //const meshMaterial = new MeshLambertMaterial({
        //const meshMaterial = new MeshPhongMaterial({
        //const meshMaterial = new MeshBasicMaterial({
        //const meshMaterial = new MeshStandardMaterial({
        const meshMaterial = new MeshPhysicalNodeMaterial({
            color: 0x0000ff, // 示例颜色
            //roughness: 0.5, // 示例粗糙度
            //metalness: 0.5,  // 示例金属度
            side: DoubleSide
        })

        /*
        const vertexShader = `
        void main() {
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
        `;

        const fragmentShader = `
        void main() {
            gl_FragColor = vec4(normalize(normal), 1.0); // 简单的法线着色器
        }
        `;

        const customMaterial = new ShaderMaterial({
            vertexShader: vertexShader,
            fragmentShader: fragmentShader
        });
        */


        //const wireFrameMat = new MeshStandardMaterial({ wireframe: true })
        const wireFrameMat = new MeshPhysicalNodeMaterial({ wireframe: true })
  
        // 添加组合材质
        let meshCyl = createMultiMaterialObject(geom, [
          meshMaterial,
          wireFrameMat
          //customMaterial
        ])

        meshCyl.position.set(x, y, z);
  
        // 网格对象添加到场景中
        return meshCyl
    }

    addBox(x=0,y=0,z=0){
        // 创建一个立方体
        const geometry = new BoxGeometry(80,80,80);
        //const material = new MeshBasicMaterial({ color: 0x00ff00 });
        const material = new MeshPhysicalNodeMaterial({ color: 0x00ff00 });
        const cube = new Mesh(geometry, material);

        let cubeGeometry = new BoxGeometry(80, 80, 80);
        let cubeEdges = new EdgesGeometry(cubeGeometry, 1);
        let edgesMtl =  new LineBasicMaterial({color: 0xdd2222});
        edgesMtl.depthTest = true;// 深度测试，若开启则是边框透明的效果
        let cubeLine = new LineSegments(cubeEdges, edgesMtl);
        //将创建的线框加入的几何体中
        cube.add(cubeLine);

        cube.position.set(x, y, z);
        this.scene.add(cube);
    }

    isMeshType(object) {
        return object?.type === 'Mesh'
    }

    isValidBufferGeometry(geometry) {
        
        if ((geometry instanceof BufferGeometry)) {
          return false;
        }
      
        const position = geometry.attributes.position;
        if (!position) {
          return false;
        }
      
        // 检查顶点数组的长度是否合理
        if (position.count < 3) {
          return false;
        }
      
        // 检查顶点数组是否包含正确的数据类型
        if (position.array.constructor !== Float32Array) {
          return false;
        }
      
        // 可以继续检查其他属性，如法线、UV等
      
        return true;
    }
      
    addColorBuffer(geometry){
        
          // 使用函数检查几何体
          const isValid = this.isValidBufferGeometry(geometry);
          
          if(!isValid){
              return
          }
          
          const pos = geometry.attributes.position;
          const count = pos.count; //顶点数量
      
              // 1. 计算模型y坐标高度差
          const xArr = [];//顶点所有x坐标，也就是地形高度
          const yArr = [];//顶点所有y坐标，也就是地形高度
          const zArr = [];//顶点所有z坐标，也就是地形高度
          for (let i = 0; i < count; i++) {
              xArr.push(pos.getX(i));//获取顶点x坐标，也就是地形高度
              yArr.push(pos.getY(i));//获取顶点y坐标，也就是地形高度
              zArr.push(pos.getZ(i));//获取顶点z坐标，也就是地形高度
          }
      
          xArr.sort();//数组元素排序，从小到大
          const minx = xArr[0];//x最小值
          const maxx = xArr[xArr.length - 1];//x最大值
          const xheight = maxx - minx; //山脉整体高度 
      
          yArr.sort();//数组元素排序，从小到大
          const miny = yArr[0];//y最小值
          const maxy = yArr[yArr.length - 1];//y最大值
          const yheight = maxy - miny; //山脉整体高度 
      
          zArr.sort();//数组元素排序，从小到大
          const minz = zArr[0];//z最小值
          const maxz = zArr[zArr.length - 1];//z最大值
          const zheight = maxz - minz; //山脉整体高度 
      
          //console.log("x:",minx,maxx,xheight);
          //console.log("y:",miny,maxy,yheight);
          //console.log("z:",minz,maxz,zheight);
          
          // 计算每个顶点的颜色值 // 2. 计算每个顶点的颜色值
          const colorsArr = [];
          
          // 根据顶点距离起点远近进行颜色插值计算
          let c1 = new Color(parseInt(this.colorsPalette[8].color)); //曲线起点颜色 蓝色 山谷颜色
          let c2 = new Color(parseInt(this.colorsPalette[0].color)); //曲线结束点颜色 红色 山顶颜色
          for (let i = 0; i < count; i++) {
              //const percent = i / count; //点索引值相对所有点数量的百分比
              // 红色分量从0到1变化，蓝色分量从1到0变化
              //colorsArr.push(percent, 0, 1 - percent); //蓝色到红色渐变色
              //根据顶点位置顺序大小设置颜色渐变
              //const c = c1.clone().lerp(c2, percent);//颜色插值计算
              //const c = new THREE.Color();
              //颜色插值结果，和c1一样rgb(1,0,0),50% c1 + 50% c2混合
              //c.lerpColors(c1,c2, 0.5);
              //colorsArr.push(c.r, c.g, c.b); 
      
              //梯度(gradient)、散度(divergence)与旋度(rotation)
              //梯度：标量求梯度得到矢量。
              //散度：矢量求散度得到标量。
              //旋度：矢量求旋度得到矢量。
      
              //当前高度和整体高度比值
              //const percent = (pos.getX(i) - minx) / xheight;
              //const c = c1.clone().lerp(c2, percent);//颜色插值计算
              //colorsArr.push(c.r, c.g, c.b); 
      
              //ymax: 2845 
              //ymin: 1750 
      
              if(pos.getY(i)>=1700 && pos.getY(i)<2000 ){
                  c1 = new Color(parseInt(this.colorsPalette[8].color)); //曲线起点颜色 蓝色 山谷颜色
                  c2 = new Color(parseInt(this.colorsPalette[8].color)); //曲线结束点颜色 红色 山顶颜色
              } else if(pos.getY(i)>=2000 && pos.getY(i)<2300 ){
                  c1 = new Color(parseInt(this.colorsPalette[7].color)); //曲线起点颜色 蓝色 山谷颜色
                  c2 = new Color(parseInt(this.colorsPalette[7].color)); //曲线结束点颜色 红色 山顶颜色
              } else if(pos.getY(i)>=2300 && pos.getY(i)<2400 ){
                  c1 = new Color(parseInt(this.colorsPalette[6].color)); //曲线起点颜色 蓝色 山谷颜色
                  c2 = new Color(parseInt(this.colorsPalette[6].color)); //曲线结束点颜色 红色 山顶颜色
              }  else if(pos.getY(i)>=2400 && pos.getY(i)<2500 ){
                  c1 = new Color(parseInt(this.colorsPalette[5].color)); //曲线起点颜色 蓝色 山谷颜色
                  c2 = new Color(parseInt(this.colorsPalette[5].color)); //曲线结束点颜色 红色 山顶颜色
              }  else if(pos.getY(i)>=2500 && pos.getY(i)<2600 ){
                  c1 = new Color(parseInt(this.colorsPalette[4].color)); //曲线起点颜色 蓝色 山谷颜色
                  c2 = new Color(parseInt(this.colorsPalette[4].color)); //曲线结束点颜色 红色 山顶颜色
              } else if(pos.getY(i)>=2600 && pos.getY(i)<2700 ){
                  c1 = new Color(parseInt(this.colorsPalette[3].color)); //曲线起点颜色 蓝色 山谷颜色
                  c2 = new Color(parseInt(this.colorsPalette[3].color)); //曲线结束点颜色 红色 山顶颜色
              } else if(pos.getY(i)>=2700 && pos.getY(i)<2800 ){
                  c1 = new Color(parseInt(this.colorsPalette[2].color)); //曲线起点颜色 蓝色 山谷颜色
                  c2 = new Color(parseInt(this.colorsPalette[1].color)); //曲线结束点颜色 红色 山顶颜色
              } else if(pos.getY(i)>=2800 && pos.getY(i)<2900 ){
                  c1 = new Color(parseInt(this.colorsPalette[1].color)); //曲线起点颜色 蓝色 山谷颜色
                  c2 = new Color(parseInt(this.colorsPalette[0].color)); //曲线结束点颜色 红色 山顶颜色
              }
      
              //console.log(pos.getY(i))
      
              const percent = (pos.getY(i) - miny) / yheight;
              const c = c1.clone().lerp(c2, percent);//颜色插值计算
              colorsArr.push(c.r, c.g, c.b); 
      
              //const percent = (pos.getZ(i) - minz) / zheight;
              //const c = c1.clone().lerp(c2, percent);//颜色插值计算
              //colorsArr.push(c.r, c.g, c.b); 
      
          }

          const colorBuffer = new Float32Array(colorsArr);
          return colorBuffer
    }

    async initOilMesh(file="") {
         
        //const file = "./assets/models/data3-cut-25.glb";

        // 纹理加载器管理
        const manager = new LoadingManager()
        manager.onLoad = ()=>{
            console.log( 'Loading complete!')
            
            setTimeout(() => {
                document.querySelector(".loader-container").classList.add("loaded")
                document.querySelector(".loader").setAttribute("style", "  border-right-color: #0000;")
            }, 1500*1);

        }

        manager.onProgress =  async ( url, itemsLoaded, itemsTotal )=> {
            //console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' )
            this.downProgress = itemsLoaded / itemsTotal === 1 ? '100%' : `${((itemsLoaded / itemsTotal) * 100).toFixed(0)}`+'%'
            //instance.proxy.$forceUpdate();
            console.log("progress: ", this.downProgress)
        }
        manager.onError = ( url )=> {
            console.log( 'There was an error loading ' + url )
        }

        //应用Draco解压/压缩网格
        const dracoLoader = new DRACOLoader();
        dracoLoader.setDecoderPath(import.meta.env.BASE_URL + 'public/draco/')
        // 创建GLTF加载器对象
        const loader = new GLTFLoader(manager)
        loader.setDRACOLoader(dracoLoader)

         const gltf = await loader.loadAsync(file, (progress) => {
             //console.log((progress.loaded / progress.total * 100) + '% blocks oil loaded');
         });
         //console.log(gltf);
         this.model = gltf.scene;
         //WebGL 使用 OpenGL 惯例，其中 Y 轴朝上，Z 轴朝向观看者。WebGPU 使用 Metal 惯例，其中 Y 轴在屏幕之外，Z 轴在屏幕范围外。
         //请注意，在帧缓冲区坐标、视口坐标和片段/像素坐标中，Y 轴方向为向下。在剪辑空间中，Y 轴方向仍然与 WebGL 中的方向相同。
         this.x = -3850/1, this.y = -1800/1, this.z= -1750/1;//  sx = 0.02, sy = 0.02, sz = 0.02;
         // 几何体沿着x轴平移
         this.model.translateX(this.x);
         // 几何体沿着y轴平移
         this.model.translateY(this.y);
         // 几何体沿着Z轴平移
         this.model.translateZ(this.z);

         // 修改模型的缩放
         this.model.scale.set(this.sx, this.sy, this.sz); // 设置缩放比例 (x, y, z)
         // 几何体绕着x轴旋转90度
         //model.rotateZ(Math.PI);
         // 几何体绕着x轴旋转90度
         this.model.rotateY(-Math.PI / 12);
         
         this.model.castShadow = true;
                 

         let meshCount = 0;
         let colorCube = parseInt(this.colorList[0]);
         let colorCount = 0;
         let color = new Color(colorCube);

         let that = this;
         setTimeout( ()=> {
            this.model.traverse((child) =>{
                if (child.isMark || child.isMarkChild || child.isLine || child.isSprite) return;
                if (that.isMeshType(child) && child.isMesh) {
    
                    //console.log(colorBuffer)
    
                    // child.geometry.center();
                    // child is an instance of Mesh
                     child.receiveShadow = true; 
                     child.frustumCulled = false;
                     //模型阴影
                     child.castShadow = true;
                     //模型自发光
                     child.material.emissive = child.material.color;
                     child.material.emissiveMap = child.material.map;
                     if(!(meshCount%1)){
                         colorCount++
                         if(colorCount>this.colorList.length){
                            colorCount = 0;
                         }
                         colorCube = parseInt(this.colorList[colorCount]);
                         color = new Color(colorCube);
                        //console.log(meshCount)
                        const colorBuffer = that.addColorBuffer(child.geometry);
        
                        // 设置几何体attributes属性的颜色color属性
                        child.geometry.attributes.color = new BufferAttribute(colorBuffer, 3); 
    
                     }
     
                     /*
                     const gradientMaterial = new THREE.ShaderMaterial({
                        side: THREE.DoubleSide,
                        uniforms: {
                            topColor: { value: new THREE.Color(0xff0000) },
                            bottomColor: { value: new THREE.Color(0x0000ff) },
                        },
                        vertexShader: `
                        varying vec3 vPosition;
                        void main(){
                        // vPosition = position;
                        // 考虑mesh及其父对象旋转、缩放、平移的影响
                        vPosition = vec3(modelMatrix * vec4( position, 1.0 ));
                        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
                        }
                        `,
                        fragmentShader: `
                        varying vec3 vPosition;
                        void main() {
                            float per = vPosition.y /1000.0;
                            // Mesh y坐标50，颜色值：1  0  0(红色)
                            // Mesh y坐标0，颜色值：0  1  0(绿色)
                            gl_FragColor = vec4(per,1.0-per,0.0,1.0);
                        }
                        `,
                    });
                    */
    
     
                     // 替换材质
                     child.material = that.glassMaterial;
                     //child.material = gradientMaterial;
                     //child.material = material;
     
                     meshCount++
                 }
             })
         }, 1);

        
         this.models.add(this.model)
         //this.scene.add(this.model);

    }

    async initOilMesh1(file="") {
        
        //const file = "./assets/models/data3-cut-25-2.glb";

        // 纹理加载器管理
        const manager = new LoadingManager()
        manager.onLoad = ()=>{
            console.log( 'Loading complete!')

            setTimeout(() => {
                document.querySelector(".loader-container").classList.add("loaded")
                document.querySelector(".loader").setAttribute("style", "  border-right-color: #0000;")
            }, 1500);

        }

        manager.onProgress =  async ( url, itemsLoaded, itemsTotal )=> {
            //console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' )
            this.downProgress = itemsLoaded / itemsTotal === 1 ? '100%' : `${((itemsLoaded / itemsTotal) * 100).toFixed(0)}`+'%'
            //instance.proxy.$forceUpdate();
            console.log("progress: ", this.downProgress)
        }
        manager.onError = ( url )=> {
            console.log( 'There was an error loading ' + url )
        }

        //应用Draco解压/压缩网格
        const dracoLoader = new DRACOLoader();
        dracoLoader.setDecoderPath(import.meta.env.BASE_URL + 'public/draco/')
        // 创建GLTF加载器对象
        const loader = new GLTFLoader(manager)
        loader.setDRACOLoader(dracoLoader)

         
        const gltf = await loader.loadAsync(file, (progress) => {
            //console.log((progress.loaded / progress.total * 100) + '% blocks oil1 loaded');
        });
        //console.log(gltf);
        let model = gltf.scene;
        let x = -3850/50, y = -1800/50, z= -1750/50,  sx = 0.02, sy = 0.02, sz = 0.02;
        // 修改模型的缩放
        model.scale.set(sx, sy, sz); // 设置缩放比例 (x, y, z)
        // 几何体绕着x轴旋转90度
        //model.rotateZ(Math.PI);
        // 几何体绕着x轴旋转90度
        model.rotateY(-Math.PI / 12);
        // 几何体沿着x轴平移
        model.translateX(x);
            // 几何体沿着y轴平移
        model.translateY(y);
        // 几何体沿着Z轴平移
        model.translateZ(z);

        model.castShadow = true;
                
        this.scene.add(model);

        let meshCount = 0;
        let colorCube = parseInt(this.colorList[0]);
        let colorCount = 0;
        let color = new Color(colorCube);

        let that = this;
        model.traverse((child) =>{
           if (that.isMeshType(child) && child.isMesh) {
               // child is an instance of Mesh
                child.receiveShadow = true; 
                child.frustumCulled = false;
                //模型阴影
                child.castShadow = true;
                //模型自发光
                child.material.emissive = child.material.color;
                child.material.emissiveMap = child.material.map;
                if(!(meshCount%1)){
                    colorCount++
                    if(colorCount>this.colorList.length){
                        colorCount = 0;
                     }
                    colorCube = parseInt(this.colorList[colorCount]);
                    color = new Color(colorCube);
                    
                    //console.log(meshCount)
                }

                const matParams = {
                    color: color,
                    // 渲染两面
                    side: DoubleSide,
                    //wireframe: true, //材质的网格wireframe属性
                    clearcoat: 1.0,//物体表面清漆层或者说透明涂层的厚度
                    clearcoatRoughness: 0.1,//透明涂层表面的粗糙度
                    transmission: 0.5,//物理材质透光率,模拟玻璃、半透明塑料一类的视觉效果,代替普通透明属性.opacity 设置Mesh透明度,即便完全透射的情况下仍可保持高反射率。
                    ior: 1.5,//折射率.ior非金属材料的折射率从1.0到2.333。默认值为1.5。
                    metalness: 0.9,//金属度
                    roughness: 0.5,//粗糙度
                    bumpScale: 0.5, // 凹凸贴图的高度
                    envMapIntensity: 2.5, //环境贴图对Mesh表面影响程度
                    opacity: 0.9,
                    // 我们同样需要把tansparent属性打开
                    transparent: true,
                }
                const glassMaterial = new MeshPhysicalNodeMaterial(matParams);

                // 替换材质
                child.material = glassMaterial;

                meshCount++
            }
        })
   }

    initCamera() {
        // setting the camera so that the scene is vaguely centered and fits the screen, at an angle where the light is gently grazing the objects
        const initCamAngle = -Math.PI * 2 / 3;
        const initCamDist = 100;
        const camOffsetToFit = new Vector3(Math.cos(initCamAngle), 0, Math.sin(initCamDist)).multiplyScalar(10);
        //this.camera.position.set(Math.cos(initCamAngle) * initCamDist + 10, 55 + 10, Math.sin(initCamAngle) * initCamDist + 10).add(camOffsetToFit);
        this.camera.position.set(0, 3000, -6000)
        this.camera.updateProjectionMatrix();

        this.controls = new OrbitControls(this.camera, this.canvas);
        this.controls.enableDamping = true;
        this.controls.dampingFactor = 0.1;
        this.controls.maxPolarAngle = Math.PI / 2 - Math.PI / 16;
        this.controls.minDistance = 1;
        this.controls.maxDistance = 20000;
        this.controls.target.set(0, 0, 0).add(camOffsetToFit);
        this.controls.update();
    }

    effectController;
    initPostProcessing() {

        /*
        * post-processing set up with :
        * - a scene pass that outputs the color, normal and depth
        * - an ambient occlusion pass that uses the depth and normal to compute the AO
        * - a depth of field pass that uses the AO and the viewZ to compute the blur. Parameters are dynamic and updated in the animate loop
        * - an FXAA pass to antialias the final image
        */
        this.post = new PostProcessing(this.renderer);

        //后处理效果 maxblur 缩小 100倍
        const effectController = {
            focus: uniform(32.0),
            aperture: uniform(100),
            maxblur: uniform(0.001)
        };
        this.effectController = effectController;

        const scenePass = pass(this.scene, this.camera);
        scenePass.setMRT(mrt({
            output: output,
            normal: transformedNormalView
        }));

        const scenePassColor = scenePass.getTextureNode('output');
        const scenePassNormal = scenePass.getTextureNode('normal');
        const scenePassDepth = scenePass.getTextureNode('depth');

        const aoPass = ao(scenePassDepth, scenePassNormal, this.camera);
        aoPass.distanceExponent.value = 1;
        aoPass.distanceFallOff.value = .01;
        aoPass.radius.value = 1.0;
        aoPass.scale.value = 1.5;
        aoPass.thickness.value = 1;

        const blendPassAO = aoPass.getTextureNode().mul(scenePassColor);
        const scenePassViewZ = scenePass.getViewZNode();
        const dofPass = dof(blendPassAO, scenePassViewZ, effectController.focus, effectController.aperture.mul(0.00001), effectController.maxblur);
        const vignetteFactor = clamp(viewportUV.sub(0.5).length().mul(1.2), 0.0, 1.0).oneMinus().pow(0.5);
        this.post.outputNode = fxaa(dofPass.mul(vignetteFactor));

    }

    async initEnvironment() {

        const { scene } = this;

        // loads an ultra hdr skybox to get some nice natural tinting and a few reflections
        // skybox is https://polyhaven.com/a/rustig_koppie_puresky , converted to ultra hdr jpg with with https://gainmap-creator.monogrid.com/
        const texture = await new UltraHDRLoader().setDataType(FloatType).setPath('./assets/ultrahdr/').loadAsync('rustig_koppie_puresky_2k.jpg', (progress) => {
            console.log((progress.loaded / progress.total * 100) + '% skybox loaded');
        });
        texture.mapping = EquirectangularReflectionMapping;
        texture.needsUpdate = true;
        scene.background = texture;
        scene.environment = texture;

        const groundGeom = new PlaneGeometry(6000, 6000, 1, 1);
        groundGeom.rotateX(-Math.PI * 0.5);
        const groundMat = new MeshStandardNodeMaterial({ color: 0x333333 });
        const groundMesh = new Mesh(groundGeom, groundMat);
        groundMesh.name = 'groundMesh';
        scene.add(groundMesh);
    }

    blocks = [];
    gridZone = new Box2(new Vector2(0, 0), new Vector2(148, 148));
    async initGrid() {
        const zone = this.gridZone;
        const maxBlockSize = new Vector2(5, 5);
        maxBlockSize.x = MathUtils.randInt(1, 5);
        maxBlockSize.y = maxBlockSize.x;

        let px = 0;
        let py = 0;

        // Double array to store the occupation state of the grid. -1 means free, any other number is the block id
        const occupied = Array.from({ length: this.gridZone.max.x }, () => 
            Array(this.gridZone.max.y).fill(-1)
        );

        const squareChance = 0.5;
        // fills the whole grid with blocks of random sizes and colors
        while (py < zone.max.y) {

            while (px < zone.max.x) {
                let maxW = 0;
                const end = Math.min(zone.max.x, px + maxBlockSize.x);
                // check for the maximum width available
                for (let i = px; i < end; i++) {
                    if (occupied[i][py] != -1) {
                        break;
                    }
                    maxW++;
                }
                if (maxW == 0) {
                    px++;
                    continue;
                }

                const isSquare = MathUtils.randFloat(0, 1) < squareChance;

                const sx = MathUtils.randInt(1, maxW);
                const sy = isSquare ? sx : MathUtils.randInt(1, maxBlockSize.y);

                // fill occupied grid
                const endX = Math.min(zone.max.x, px + sx);
                const endY = Math.min(zone.max.y, py + sy);                
                for (let i = px; i < endX; i++) {
                    for (let j = py; j < endY; j++) {
                        occupied[i][j] = 1;
                    }
                }
                px += sx;
            }
            py++;
            px = 0;

            // max sizes have a chance to be randomized after every line, to create some structure
            if (MathUtils.randFloat(0, 1) > 0.8) {
                maxBlockSize.x = (MathUtils.randFloat(0, 1) > 0.5) ? 2 : 5;
                maxBlockSize.y = (MathUtils.randFloat(0, 1) > 0.5) ? 2 : 5;
            }

        }
    }

    
    blockMesh;
 

    onMouseMove (e) {
        
        let mouse = new Vector2()
        let raycaster = new Raycaster()
        // 通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1
        mouse.x = (e.clientX / window.innerWidth) * 2 - 1
        mouse.y = -(e.clientY / window.innerHeight) * 2 + 1
        // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
        raycaster.setFromCamera(mouse, this.camera)
        // 获取raycaster直线和所有模型相交的数组集合
        let intersects = raycaster.intersectObjects(this.scene.children)

        if(intersects.length > 0 && this.isMeshType(intersects[0].object) && intersects[0].object.name!='groundMesh') {

            if(this.selectedObjects!=null){
                // 通过 name 来查找指定对象
                let meshTemp = this.scene.getObjectByName(this.selectedObjects.name)
                meshTemp.material = this.originalMaterial
            }
        
          this.selectedObjects = intersects[0].object
          this.originalMaterial = intersects[0].object.material

          intersects[0].object.material.color = new Color('#123456')

          //轮廓渲染： 通过使用线框网格并在场景中放置适当的灯光，可以创建引人注目的轮廓渲染效果。
          //闪烁效果： 使用透明度和线框网格的组合，可以创建闪烁或闪烁的效果。
          //分段渲染： 通过将不同部分的网格渲染成不同的线宽或颜色，可以实现分段渲染效果。
          //使用压缩纹理、减少场景中的多边形数量、使用LOD（分级细节）技术和禁用不必要的灯光来优化Three.js的性能。
          //设置纹理贴图、修改颜色、透明度和网格线框
          //this.selectedObjects.material.color.set(0x00ff00)
          //this.outlineObj(selectedObjects)
          let body = document.querySelector('body')
          body.style.cursor = 'pointer'
        } else {
          if(this.selectedObjects!=null){
            // 通过 name 来查找指定对象
            let meshTemp = this.scene.getObjectByName(this.selectedObjects.name)
            meshTemp.material = this.originalMaterial
            this.selectedObjects = null
            this.originalMaterial = null
          }
          
          let body = document.querySelector('body')
          body.style.cursor = 'default'
          return false
        } 
    }
    
    outlineObj (Objects) {
        this.composer = new EffectComposer(this.renderer)
        this.renderPass = new RenderPass(this.scene, this.camera)
        this.composer.addPass(this.renderPass)
        this.outlinePass = new OutlinePass(
          new Vector2(window.innerWidth, window.innerHeight),
          this.scene,
          this.camera
        )
        this.outlinePass.edgeStrength = 5.0
        this.outlinePass.edgeGlow = 1
        this.outlinePass.usePatternTexture = false
        this.outlinePass.edgeThickness = 3
        this.outlinePass.downSampleRatio = 2
        this.outlinePass.pulsePeriod = 1
        let color = '0x00ff00'
        this.outlinePass.visibleEdgeColor.set(parseInt(color))
        this.outlinePass.hiddenEdgeColor = new Color(0, 0, 0)
        this.outlinePass.clear = true
        this.composer.addPass(this.outlinePass)
        this.outlinePass.selectedObjects = Objects
    }


    onResize(e, toSize) {
        const { camera, renderer } = this;
        const size = new Vector2(window.innerWidth, window.innerHeight);
        if (toSize) size.copy(toSize);

        const ww = window.innerWidth;
        const wh = window.innerHeight;
        const aspect = ww / wh;

        camera.aspect = aspect;
        camera.updateProjectionMatrix();

        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(size.x, size.y);
        renderer.domElement.style.width = `${size.x}px`;
        renderer.domElement.style.height = `${size.y}px`;
    }

    elapsed = 0;
    async animate() {

        const { controls, clock, post } = this;

        const dt = clock.getDelta();
        this.elapsed = clock.getElapsedTime();

        this.updateCamera(dt);
        controls.update(dt);
        await post.renderAsync();

        if( !Demo.firstRenderDone) { 
            Demo.firstRenderDone = true;
        }

        //this.renderer!.render(this.scene, this.camera);
        //requestAnimationFrame(this.animate);
        //let animateId = requestAnimationFrame(this.animate);
        //cancelAnimationFrame(animateId);

        //this.composer && this.composer.render();
    
    }

    themeTransitionStart = -10;
    themeTransitionDuration = 5;
    dummy = new Object3D();
    tempCol = new Color();
    blockSize = new Vector2(1, 1);
    blockCenter = new Vector2();
    heightNoise = new FastSimplexNoise({ frequency: 0.05, octaves: 2, min: 0, max: 1, persistence: 0.5 });
    wavesAmplitude = 8;


    raycaster = new Raycaster();
    groundRayPlane = new Plane(new Vector3(0, 1, 0), 0);
    
    camDist = 50;
    camdistVel = 0.0;
    camK = 0.05;
    camDir = new Vector3();

    // an approximation of an auto-focus effect
    updateCamera(dt) {
        const camDir = this.camDir;
        this.camera.getWorldDirection(camDir);
        this.groundRayPlane.constant = this.camera.position.y * .1;
        this.raycaster.set(this.camera.position, camDir.normalize());
        this.raycaster.ray.intersectPlane(this.groundRayPlane, camDir);
        const dist = camDir.sub(this.camera.position).length();

        const targetDist = dist;
        const distVel = (targetDist - this.camDist) / dt;
        this.camdistVel = MathUtils.lerp(this.camdistVel, distVel, this.camK);
        this.camDist += this.camdistVel * dt;

        this.effectController.focus.value = MathUtils.lerp(this.effectController.focus.value, this.camDist * .85, .05);
        this.effectController.aperture.value = MathUtils.lerp(this.effectController.aperture.value, 100 - this.camDist * .5, .025);
    }

    colorsModes = ['dark', 'light'];
    baseTargetColor = new Color(0x999999);
    topTargetColors = new Color(0x192939);
    colorMode = this.colorsModes[1];

    setColorMode(mode) {

        this.colorMode = mode;
        this.themeTransitionStart = this.elapsed;
        if (this.colorMode == 'dark') {
            this.baseTargetColor.copy(ABlock.DARK_BASE_COLOR);
            this.topTargetColors = ABlock.DARK_COLORS;

        } else {
            this.baseTargetColor.copy(ABlock.LIGHT_BASE_COLOR);
            this.topTargetColors = ABlock.LIGHT_COLORS;
        }


    }

    /// Inigo Quilez remaping functions https://iquilezles.org/articles/functions/
    pcurve(x, a, b) {
        const k = Math.pow(a + b, a + b) / (Math.pow(a, a) * Math.pow(b, b));
        return k * Math.pow(x, a) * Math.pow(1.0 - x, b);
    }

    gain(x, k) {
        const a = 0.5 * Math.pow(2.0 * ((x < 0.5) ? x : 1.0 - x), k);
        return (x < 0.5) ? a : 1.0 - a;
    }

    cubicPulse(c, w, x) {
        let x2 = Math.abs(x - c);
        if (x2 > w) return 0.0;
        x2 /= w;
        return 1.0 - x2 * x2 * (3.0 - 2.0 * x2);
    }
    clear() {
        console.log("清理内存")
        // location.reload()
        //resize.clear()
        //document.body.removeChild(this.stats.dom)
        //cancelAnimationFrame(this.tickId)
        //this.tick = null
        //this.scene.traverse(child => {
        //    if (child instanceof Mesh) {
        //        child.geometry.dispose()
        //        child.material.dispose()
        //    }
        //})
        //this.scene = null
        //this.camera = null
        //this.renderer = null
        //this.controls.dispose()
        //this.post = null
        //disposeTexture()
        //gui.children.forEach(h => { h.domElement.remove() })
    }
}